<template>
  <div class="flip-card-container">
    <CardStack ref="cardStackRef" :pages="props.pages" @click="handleCardClick" />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import CardStack from './CardStack.vue'

export interface PageItem {
  avatar: string
  name: string
  sex: 'male' | 'female'
  age: number
  starsign: string
  distance: string
  photos: string[]
  sign: string
}

const props = defineProps<{
  pages: PageItem[]
}>()

const emit = defineEmits(['click'])

const cardStackRef = ref<InstanceType<typeof CardStack> | null>(null)

const handleCardClick = (index: number) => {
  emit('click', index)
}

const prev = () => {
  cardStackRef.value?.prev()
}

const next = () => {
  cardStackRef.value?.next()
}

defineExpose({ prev, next })
</script>



<style scoped>
.flip-card-container {
  position: relative;
  width: 320px;
  height: 450px;
  margin: 0 auto;
}
</style>